<template>
	<div class="production-line">
		<el-card>
			<div class="toolbar">
				<el-input v-model="keyword" placeholder="搜索生产线" clearable style="width:200px" @input="filterLines" />
				<el-button type="primary" @click="openLineDialog()">新增生产线</el-button>
			</div>
			<el-table :data="filteredLines" border size="small" style="margin-bottom:22px;" row-key="id"
				@expand-change="onExpand"  :expand-row-keys="expandedRowKeys">
				<el-table-column type="expand">
					<template #default="props">
						<!-- 工序分段配置 -->
						<el-card style="margin:10px 0;">
							<div style="font-weight:bold;margin-bottom:8px;">
								工序分段配置
								<el-button type="success" size="small" style="margin-left:14px;"
									@click="openStepDialog(props.row)">添加工序</el-button>
							</div>
							<el-table :data="props.row.steps" border size="small">
								<el-table-column prop="stepNo" label="工序编号" width="120" />
								<el-table-column prop="stepName" label="工序名称" width="140" />
								<el-table-column prop="section" label="分段" width="90" />
								<el-table-column prop="desc" label="说明" />
								<el-table-column label="操作" width="140">
									<template #default="scope">
										<el-button size="small"
											@click="editStep(props.row, scope.$index)">编辑</el-button>
										<el-button size="small" type="danger"
											@click="removeStep(props.row, scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</template>
				</el-table-column>
				<el-table-column prop="lineNo" label="产线编号" width="120" />
				<el-table-column prop="lineName" label="生产线名称" width="160" />
				<el-table-column prop="type" label="类型" width="100" />
				<el-table-column prop="desc" label="描述" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openLineDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeLine(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 生产线新增/编辑弹窗 -->
		<el-dialog v-model="lineDialog.visible" title="生产线信息" width="380px">
			<el-form :model="lineDialog.data" label-width="78px">
				<el-form-item label="产线编号">
					<el-input v-model="lineDialog.data.lineNo" />
				</el-form-item>
				<el-form-item label="生产线名称">
					<el-input v-model="lineDialog.data.lineName" />
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="lineDialog.data.type" placeholder="请选择类型">
						<el-option label="固体制剂" value="固体制剂" />
						<el-option label="注射剂" value="注射剂" />
						<el-option label="原料药" value="原料药" />
						<el-option label="包装线" value="包装线" />
					</el-select>
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="lineDialog.data.desc" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="lineDialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveLine">保存</el-button>
			</template>
		</el-dialog>

		<!-- 工序新增/编辑弹窗 -->
		<el-dialog v-model="stepDialog.visible" title="工序信息" width="360px">
			<el-form :model="stepDialog.data" label-width="68px">
				<el-form-item label="工序编号">
					<el-input v-model="stepDialog.data.stepNo" />
				</el-form-item>
				<el-form-item label="工序名称">
					<el-input v-model="stepDialog.data.stepName" />
				</el-form-item>
				<el-form-item label="分段">
					<el-input v-model="stepDialog.data.section" />
				</el-form-item>
				<el-form-item label="说明">
					<el-input v-model="stepDialog.data.desc" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="stepDialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveStep">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, computed, watchEffect } from 'vue'


// 生产线模拟数据
const lines = ref([
	{
		id: 1,
		lineNo: 'LINE-001',
		lineName: '固体制剂生产线',
		type: '固体制剂',
		desc: '颗粒、片剂生产',
		steps: [
			{ stepNo: 'STEP-001', stepName: '投料', section: '前段', desc: '称量、加料' },
			{ stepNo: 'STEP-002', stepName: '混合', section: '前段', desc: '' },
			{ stepNo: 'STEP-003', stepName: '制粒', section: '中段', desc: '湿法制粒' },
			{ stepNo: 'STEP-004', stepName: '干燥', section: '中段', desc: '' },
			{ stepNo: 'STEP-005', stepName: '压片', section: '后段', desc: '' }
		]
	},
	{
		id: 2,
		lineNo: 'LINE-002',
		lineName: '注射剂生产线',
		type: '注射剂',
		desc: '小容量注射剂',
		steps: [
			{ stepNo: 'STEP-011', stepName: '配液', section: '前段', desc: '' },
			{ stepNo: 'STEP-012', stepName: '灌装', section: '中段', desc: '灌装液体' },
			{ stepNo: 'STEP-013', stepName: '灭菌', section: '后段', desc: '高温灭菌' },
			{ stepNo: 'STEP-014', stepName: '灯检', section: '后段', desc: '' },
			{ stepNo: 'STEP-015', stepName: '包装', section: '末段', desc: '' }
		]
	}
])

const keyword = ref('')
const filteredLines = computed(() => {
	if (!keyword.value) return lines.value
	return lines.value.filter(l => l.lineName.includes(keyword.value) || l.lineNo.includes(keyword.value))
})

// 生产线弹窗
const lineDialog = reactive({
	visible: false,
	data: { id: '', lineNo: '', lineName: '', type: '', desc: '', steps: [] },
	editIndex: -1
})

function openLineDialog(row) {
	if (row) {
		lineDialog.data = { ...row }
		lineDialog.editIndex = lines.value.findIndex(l => l.id === row.id)
	} else {
		lineDialog.data = { id: '', lineNo: '', lineName: '', type: '', desc: '', steps: [] }
		lineDialog.editIndex = -1
	}
	lineDialog.visible = true
}

function saveLine() {
	if (lineDialog.editIndex >= 0) {
		lines.value[lineDialog.editIndex] = { ...lineDialog.data }
	} else {
		lines.value.push({ ...lineDialog.data, id: Date.now(), steps: [] })
	}
	lineDialog.visible = false
}

function removeLine(idx) {
	lines.value.splice(idx, 1)
}

function filterLines() {
	// 触发computed
}

// 工序弹窗
const stepDialog = reactive({
	visible: false,
	data: { stepNo: '', stepName: '', section: '', desc: '' },
	editLine: null,
	editIndex: -1
})

function openStepDialog(line, step, idx) {
	stepDialog.editLine = line
	if (step) {
		stepDialog.data = { ...step }
		stepDialog.editIndex = idx
	} else {
		stepDialog.data = { stepNo: '', stepName: '', section: '', desc: '' }
		stepDialog.editIndex = -1
	}
	stepDialog.visible = true
}

function saveStep() {
	if (!stepDialog.editLine) return
	if (stepDialog.editIndex >= 0) {
		stepDialog.editLine.steps[stepDialog.editIndex] = { ...stepDialog.data }
	} else {
		stepDialog.editLine.steps.push({ ...stepDialog.data })
	}
	stepDialog.visible = false
}

function editStep(line, idx) {
	openStepDialog(line, line.steps[idx], idx)
}
function removeStep(line, idx) {
	line.steps.splice(idx, 1)
}
function onExpand() {
	// 可以触发加载工序等
}

const expandedRowKeys = ref(lines.value.map(line => line.id))
// 如果 lines 可能会变，需 watchEffect 动态维护
watchEffect(() => {
	expandedRowKeys.value = lines.value.map(line => line.id)
})
</script>

<style scoped>
.production-line {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
